<template>
  <div id="index_box">
    <div id="index">
      <div class="header">
        <img src="https://api.10street.cn/wap/images/equity/signIndex.gif" alt="">
        <van-search
          shape="round"
          background="#F55146"
          placeholder="大礼包"
          v-model="value" 
          @search="onSearch"
        />
        <div class="header_imgbox">
          <img src="https://api.10street.cn/wap/images/home_2019/news.png" alt="">
          <span>消息</span>
        </div>
      </div>
      <div class="all_nav">
        <ul class="nav">
          <li 
            v-for='item in list' 
            :key='item.item'>
              <router-link 
                tag='span'
                :to='item.route'>
                {{ item.item }}
              </router-link>
          </li>
          <li></li>
        </ul>
        <span><van-icon name="arrow-down" /></span>
      </div>
    </div>  
    <router-view  v-on:commonId='todetail'></router-view>
  </div>
</template>
<script>
import Vue from 'vue';
import BScroll from 'better-scroll'
import { Search , Icon } from 'vant';


Vue.use(Search);
Vue.use(Icon);
export default {
  data(){
    return {
      // type:'',
      value:'',
      list:[
        {
          item:'精品推荐',
          route:'/home/index/index_recommend'
        },
        {
          item:'美妆个护',
          route:'/home/index/index_makeup'
        },
        {
          item:'数码电器',
          route:'/home/index/index_appliances'
        },
        { 
          item:'美食生鲜',
          route:'/home/index/index_foods'
        },
      ],
    }
  },
  methods: {
    onSearch(){
      this.$router.push({
        path:'/list',
        query:{
          keyword:this.value
        }  
      });
    },
    todetail(commonId){
      this.$router.push({
        path:'/detail',
        query:{
          itemId:commonId
        }
      })
    }
  },
}
</script>
<style lang='stylus' scoped>
#index_box
  padding-top: 0.88rem
  height 100%
  #index
    z-index 100
    width 100%
    position  fixed
    top 0
    z-index 9999
    .header
      background #F55146
      display flex
      height 0.44rem
      width  100%
      padding-top 0.05rem
      img:nth-of-type(1)
        width 0.33rem
        height 0.33rem
        margin-left 0.03rem
      .van-search
        height 0.285rem
        flex 1
        margin-top 0.03rem
      .header_imgbox
        margin-right 0.05rem
        margin-top 0.03rem
        img
          width 0.15rem
          height 0.15rem
          display  block
        span 
          font-size 0.10rem
          color  white
    .all_nav
      display flex
      overflow auto
      background #F55146
      right 0
      &>span 
        background #F55146
        width 0.375rem
        color  white
        display flex
        justify-content center
        align-items center
        height 0.44rem
        position absolute
        right 0
      .nav
        display flex
        li
          width 0.845rem
          height 0.44rem
          text-align center
          line-height 0.44rem
          &:last-child
            width 0.375rem
          span
            color white
            padding-bottom 0.05rem
            position relative
            &.router-link-exact-active::after
              width 0.35rem
              height 0.03rem
              content ''
              background linear-gradient(274deg,rgba(255,255,255,0.25) 0%,rgba(255,255,255,1) 100%)
              position absolute
              bottom   0.0rem
              left 0.1rem

</style>